<template>
  <div class="look">

    <el-dialog :title="ruleForm.processName" :visible="showDialog" @close="btnCancel">
      <div class="infoBox">
        <div class="logo">
          <img src="@/assets/common/img.jpeg" alt>
        </div>
        <div class="info">
          <p>
            <span class="name">{{ ruleForm.username }}</span>
          </p>
          <p>
            <span>部门：</span>
            {{ ruleForm.departmentName }}
          </p>
          <p>
            <span>入职时间：</span>
            {{ ruleForm.timeOfEntry | formatDate }}
          </p>
        </div>
      </div>
      <div v-if="ruleForm.processName==='请假'" class="form">
        <el-form>
          <el-form-item label="请假类型：" prop="holidayType">
            <el-input v-model="ruleForm.data.processName" style="width: 220px;" :disabled="true" />
          </el-form-item>

          <el-form-item label="开始时间：" prop="startTime">
            <el-date-picker
              v-model="ruleForm.data.startTime"
              type="datetime"
              placeholder="选择日期"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="结束时间：" prop="endTime">
            <el-date-picker
              v-model="ruleForm.data.endTime"
              type="datetime"
              placeholder="选择日期"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="请假时长：" prop="duration">
            <el-input v-model="ruleForm.data.duration" style="width: 220px;" :disabled="true" />
          </el-form-item>
          <el-form-item label="申请原因：" prop="cause">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示请假人填写的请假原因"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="ruleForm.processName==='加班'" class="form">
        <el-form>
          <el-form-item label="补偿方式:" prop="holidayType">
            <span>调休</span>
          </el-form-item>

          <el-form-item label="开始时间：" prop="start_time">
            <el-date-picker
              v-model="ruleForm.data.start_time"
              type="datetime"
              placeholder="选择日期"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="结束时间：" prop="end_time">
            <el-date-picker
              v-model="ruleForm.data.end_time"
              type="datetime"
              placeholder="选择日期"
              :disabled="true"
            />
          </el-form-item>

          <el-form-item label="申请原因：" prop="reason">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示请假人填写的请假原因"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="form">
        <el-form>

          <el-form-item label="期望离职时间:" prop="exceptTime">
            <el-date-picker
              v-model="ruleForm.data.exceptTime"
              type="datetime"
              placeholder="选择日期"
              :disabled="true"
            />
          </el-form-item>

          <el-form-item label="申请原因：" prop="cause">
            <el-input
              v-model="ruleForm.data.reason"
              type="textarea"
              style="width: 400px;"
              placeholder="显示请假人填写的请假原因"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    ruleForm: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    }
  },
  computed: {
    title: function() {
      return this.ruleForm.processName
    }

  },
  methods: {
    btnCancel() {
      this.$emit('update:showDialog', false)
    }

  }
}
</script>

<style lang="scss" scoped>
.look{
   .infoBox {
    display: flex;
    border-bottom: solid 1px #ccc;
    margin-bottom: 20px;
    padding: 10px 0 20px 0;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .logo {
      border: solid 1px #ccc;
      width: 102px;
      height: 102px;
      border-radius: 50%;
      margin-right: 20px;
      margin-top: 20px;
    }
    .info {
      p {
        line-height: 30px;
        .name {
          font-size: 16px;
        }
        span {
          font-weight: bold;
          display: inline-block;
          margin-right: 0px;
          margin-left: 10px;
        }
      }
    }
    .buttones {
      text-align: center;
    }
  }
}
</style>
